<template>
  <div class="container">
    <el-row class="topSection boxBorder">
      <div class="topContentBox clearfix">
        <div class="fl" style="width: 160px">
          <el-select
            v-model="code"
            filterable
            placeholder="请选择"
            @change="changeFlag"
          >
            <el-option
              v-for="(item, index) of $store.state.userType == 'PROJECT_OWNER'
                ? listJS
                : list"
              :key="index"
              :label="item.name"
              :value="item.code"
            ></el-option>
          </el-select>
        </div>
      </div>
    </el-row>
    <div class="mainCon">
      <el-row class="toolbar searchInputWidth" style="padding-bottom: 0">
        <el-form
          :inline="true"
          :model="filterField"
          ref="formData"
          :rules="rules"
        >
          <el-col :lg="8" :xl="6">
            <el-form-item label="区域">
              <el-cascader
                ref="manageArea"
                v-model="areaId"
                :options="areasOptions"
                @change="getAreaId"
                clearable
                filterable
                :props="{ checkStrictly: true }"
              ></el-cascader>
            </el-form-item>
          </el-col>
          <el-col :lg="8" :xl="6">
            <el-form-item label="行业">
              <el-select
                placeholder="请选择"
                clearable
                filterable
                v-model="filterField.industryId"
              >
                <el-option
                  v-for="item in industryOptions"
                  :key="item.code"
                  :label="item.name"
                  :value="item.code"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <template v-if="advanced">
            <el-col :lg="8" :xl="6">
              <el-form-item label="项目状态">
                <el-select
                  placeholder="请选择"
                  clearable
                  filterable
                  v-model="filterField.status"
                >
                  <el-option
                    v-for="item in statusOptions"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :lg="8" :xl="6">
              <el-form-item label="投资类型">
                <el-select
                  placeholder="请选择"
                  clearable
                  filterable
                  v-model="filterField.investment"
                >
                  <el-option
                    v-for="item in investmentOptions"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :lg="8" :xl="6">
              <el-form-item label="建档日期">
                <timeSelection
                  :pickerOptions="pickerOptions1"
                  @getStartTimeValue="getarchiveDateStart"
                  @getEndTimeValue="getarchiveDateEnd"
                  :startTime="startTimeValue"
                  :endTime="endTimeValue"
                ></timeSelection>
              </el-form-item>
            </el-col>
            <el-col :lg="8" :xl="6">
              <el-form-item label="项目名称">
                <el-input
                  v-model="filterField.projectName"
                  placeholder="请输入项目名称"
                  clearable
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :lg="8" :xl="6">
              <el-form-item label="开工日期">
                <timeSelection
                  :pickerOptions="pickerOptions1"
                  @getStartTimeValue="getbeginDateStart"
                  @getEndTimeValue="getbeginDateEnd"
                  :startTime="startTimeValueTwo"
                  :endTime="endTimeValueTwo"
                ></timeSelection>
              </el-form-item>
            </el-col>
            <el-col :lg="8" :xl="6">
              <el-form-item label="包保人" v-if="code == '0'">
                <el-input
                  v-model="filterField.guards"
                  placeholder="请输入包保人"
                  clearable
                ></el-input>
              </el-form-item>
            </el-col>
          </template>
          <el-col :lg="8" :xl="6">
            <el-form-item>
              <!-- <el-button type="primary" icon="icon iconfont iconchazhao1" class="commonBtn" style="margin: 0 0 24px 20px;" v-sdc @click="searchList"></el-button> -->
              <a
                @click="toggleAdvanced"
                style="margin-left: 40px; color: #409eff; cursor: pointer"
                class="btnColor"
              >
                {{ advanced ? '收起' : '展开' }}
                <i
                  :class="advanced ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"
                ></i>
              </a>
              <el-button
                type="primary"
                icon="icon iconfont iconchazhao1"
                @click="searchList"
                class="searchBtn"
              >
                <span>搜索</span>
              </el-button>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <div class="spacing"></div>

      <div class="unRealNameMain">
        <div class="header">
          <!-- <div class="headerBox"> -->
          <!-- <div class="colSetupBottom" style="display: inline-block"> -->
          <colSetup
            :tableColList="colSetupTableCol"
            @getSelectMenuId="getSelectMenuIds"
            mark="issuesList"
          />
          <!-- </div> -->
          <el-button
            type="primary"
            class="funComBut saveBtn"
            icon="icon iconfont icondaochu"
            v-hasBtn="['mIssuesList:export', 'mIssuesListJSYZ:export']"
            @click="toExportExcel"
          >
            导出报表
          </el-button>
          <!-- </div> -->
        </div>
        <!-- 表格 -->
        <el-table
          :data="tableList"
          v-loading="loading"
          :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
          highlight-current-row
          stripe
          style="border: 1px solid #dfe6ec"
          :max-height="tableHeight"
          @sort-change="sortChange"
          ref="table"
        >
          <el-table-column
            :prop="item.prop"
            :label="item.label"
            align="left"
            :formatter="formatTd"
            v-for="item in filterList"
            :key="item.prop"
            min-width="200"
            :sortable="
              [
                'archiveDate',
                'realNameTotal',
                'attTotal',
                'balance',
                'handleDate',
                'startDate',
                'endDate',
                'cycle',
                'total',
              ].includes(item.prop)
                ? 'custom'
                : false
            "
            :fixed="item.prop === 'projectName'"
          >
            <template slot-scope="scope">
              <!-- <el-link type="primary"  v-if="item.prop == 'projectName'"  @click="toDetail(scope.$index, scope.row)"> -->
              <!-- </el-link> -->
              <div
                @click="toDetail(scope.$index, scope.row)"
                class="fontColor"
                v-if="item.prop == 'projectName'"
              >
                <copyText
                  :tableIndex="scope.$index"
                  :copyTextName="scope.row.projectName"
                  :columnName="'projectName'"
                ></copyText>
              </div>
              <span type="primary" v-else-if="item.prop == 'backPayMonths'">{{
                scope.row.backPayMonths == 0 || scope.row.backPayMonths == null
                  ? '已按月发放'
                  : '存在' + scope.row.backPayMonths + '个月未发'
              }}</span>
              <div v-else-if="item.prop == 'pcName'">
                <copyText
                  :tableIndex="scope.$index"
                  :copyTextName="scope.row.pcName"
                  :columnName="'pcName'"
                ></copyText>
              </div>
              <div v-else-if="item.prop == 'pbName'">
                <copyText
                  :tableIndex="scope.$index"
                  :copyTextName="scope.row.pbName"
                  :columnName="'pbName'"
                ></copyText>
              </div>
              <div v-else-if="item.prop == 'address'">
                <copyText
                  :tableIndex="scope.$index"
                  :copyTextName="scope.row.address"
                  :columnName="'address'"
                ></copyText>
              </div>
              <div v-else-if="item.prop == 'guards'">
                <copyText
                  :tableIndex="scope.$index"
                  :copyTextName="scope.row.guards"
                  :columnName="'guards'"
                ></copyText>
              </div>
              <div v-else-if="item.prop == 'record'">
                <copyText
                  :tableIndex="scope.$index"
                  :copyTextName="scope.row.record"
                  :columnName="'record'"
                ></copyText>
              </div>
              <span v-else>{{
                scope.row[item.prop] !== 0 ? scope.row[item.prop] || '--' : 0
              }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" fixed="right" width="160px">
            <template slot-scope="scope">
              <el-link
                v-if="code == 1"
                type="primary"
                @click="editHandle(scope.row)"
                v-hasBtn="['mIssuesList:add', 'mIssuesListJSYZ:add']"
                @input="change($event)"
                >编辑处理措施</el-link
              >
              <el-link
                v-else
                type="primary"
                @click="lookHandle(scope.row)"
                @input="change($event)"
                >查看处理措施</el-link
              >
            </template>
          </el-table-column>
          <!-- 表格数据为空时，页面显示 -->
          <div slot="empty" v-show="isShow">
            <emptyTable emptyText="暂无相关数据"></emptyTable>
          </div>
        </el-table>
        <!-- 分页 -->
        <Pagination
          ref="pagination"
          @getList="getTableList"
          :filterField="filterField"
          :requestUrl="requestUrl"
        ></Pagination>
      </div>
    </div>
    <!-- 弹窗 -->
    <el-dialog
      :title="code == 1 ? '编辑处理措施' : '查看处理措施'"
      :visible.sync="formStopVisible"
      :close-on-click-modal="false"
      @close="closeDialog"
      custom-class="brand-dialog-min-width"
      width="640px"
      :modal-append-to-body="false"
    >
      <el-form
        :model="formDataEdit"
        :rules="formDataEditrules"
        class="mrT8"
        ref="formDataEdit"
        v-if="code == 1"
      >
        <el-form-item prop="record">
          <el-input
            type="textarea"
            v-model.trim="formDataEdit.record"
            autocomplete="off"
            placeholder="请输入处理措施"
            maxlength="50"
            show-word-limit
            :rows="3"
          ></el-input>
        </el-form-item>
        <div style="margin: 22px 0">
          <el-button type="primary" class="save" @click="saveAddAction"
            >提交</el-button
          >
        </div>
      </el-form>
      <el-table
        :data="actionTableList"
        v-loading="actionloading"
        :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
        highlight-current-row
        stripe
        style="border: 1px solid #dfe6ec"
        ref="actionTable"
      >
        <el-table-column label="处理措施" prop="record">
          <template slot-scope="scope">
            <span
              class="editCell"
              style="width: 120px"
              v-show="!showVisiable || editIndex != scope.$index"
              >{{ scope.row.record }}</span
            >
            <el-input
              :id="scope.$index + 'record'"
              size="mini"
              style="width: 120px"
              v-show="showVisiable && editIndex == scope.$index"
              v-model="scope.row.record"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column
          label="提交时间"
          prop="handleDate"
          align="center"
          width="180"
        ></el-table-column>
        <el-table-column label="操作" prop="" v-if="code == 1" width="160">
          <template slot-scope="scope">
            <span v-if="editIndex == scope.$index">
              <el-link type="primary" @click="saveEdit(scope.row)"
                >保存</el-link
              >
              <el-link type="primary" @click="cancelAction">取消</el-link>
            </span>
            <el-link
              v-else
              type="primary"
              @click="saveAction(scope.row, scope.$index, 'record')"
              >编辑</el-link
            >
            <el-link @click="dellAction(scope.row)">删除</el-link>
          </template>
        </el-table-column>
      </el-table>
      <Pagination
        ref="actionPagination"
        @getList="getActionTableList"
        :filterField="actionfilterField"
        :requestUrl="actionrequestUrl"
      ></Pagination>
    </el-dialog>
  </div>
</template>
<script>
import { mapState, mapActions } from 'vuex'
import exportExcel from '@/components/publicCom/exportExcel'
import common from '../../kits/common'
export default {
  name: 'issuesList',
  components: {
    exportExcel,
  },
  data() {
    return {
      pickerOptions: {
        disabledDate(time) {
          return !(
            (time.getMonth() <= new Date().getMonth() &&
              time.getFullYear() == new Date().getFullYear()) ||
            time.getFullYear() < new Date().getFullYear()
          ) // 注意是 || 不是 && 哦
        },
      },
      pickerOptions1: {
        disabledDate(time) {
          return time.getTime() > Date.now() //如果没有后面的-8.64e7就是不可以选择今天的
        },
      },
      areaId: '',
      value1: [],
      filterField: {
        areaId: '',
        industryId: '',
        investment: '',
        totalStart: '',
        effectiveStartDate: '',
        effectiveEndDate: '',
        startDate: '',
        searchDate: '',
        status: '',
        projectName: '',
        guards: '',
        flag: '1',
        serverArea: '',
      },
      list: [
        { name: '我的包保', code: '1' },
        { name: '管辖区域', code: '0' },
      ],
      listJS: [{ name: '我的包保', code: '1' }],
      code: '1',
      colSetupTableCol: [],
      headerList: [],
      requestUrl: 'api-s/cs/projectstats/base/getproguards',
      tableList: [],
      formDataEdit: {
        record: '',
        projectId: '',
      },
      formDataEditrules: {
        record: [
          { required: true, message: '请输入处理措施', trigger: 'blur' },
          { max: 50, message: '请输入1-50个字符', trigger: 'blur' },
        ],
      },
      formStopVisible: false, //处理措施
      saveLoading: false,
      isShow: false, //列表加载
      advanced: false,
      tableHeight: null,

      actionTableList: [],
      actionfilterField: {
        projectId: '',
      },
      actionloading: false,
      actionrequestUrl: 'api-p/projectguardrecord/expand/page',
      showVisiable: false, //控制显隐
      editIndex: -1, //当前编辑行index
      oldDatas: {},
    }
  },
  created() {
    this.filterField.serverArea = this.$store.state.areaInfoArr.areaId
    this.getHeaderData('0') //表头数据
    this.getHeaderData('1') //列设置数据
    this.$nextTick(function () {
      this.$refs.pagination.getTableListData()
    })
  },
  mounted() {
    this.getInvestmenttype()
    this.getStatus()
    this.getIndustry()
    this.getAreas({ areaId: this.$store.state.areaInfoArr.areaId })
    this.$nextTick(function () {
      this.tableHeight = window.innerHeight - 300
      // 监听窗口大小变化
      let self = this
      window.onresize = function () {
        self.tableHeight = window.innerHeight - 300
      }
    })
  },
  computed: {
    ...mapState([
      'investmentOptions',
      'statusOptions',
      'areasOptions',
      'industryOptions',
    ]),
    filterList: function () {
      return this.headerList.filter((item) => {
        return item.isShow
      })
    },
  },
  methods: {
    ...mapActions([
      'getInvestmenttype',
      'getStatus',
      'getAreas',
      'getIndustry',
    ]),
    editCurrRow(rowId, str) {
      this.editIndex = rowId //不加editIndex,整个列都会一块变成可编辑
      this.showVisiable = true
      let id = rowId + str
      //也可以用this.$nextTick，个人感觉加个0.01秒的延时比下次渲染灵活一点
      setTimeout(() => {
        document.getElementById(id).focus()
      }, 100)
    },
    saveAction(item, rowId, str) {
      this.cancelAction()
      this.oldDatas = JSON.parse(JSON.stringify(item))
      this.editIndex = rowId //不加editIndex,整个列都会一块变成可编辑
      this.showVisiable = true
      let id = rowId + str
      //也可以用this.$nextTick，个人感觉加个0.01秒的延时比下次渲染灵活一点
      setTimeout(() => {
        document.getElementById(id).focus()
      }, 100)
    },
    saveAddAction() {
      this.saveLoading = true
      this.$refs['formDataEdit'].validate((valid) => {
        if (valid) {
          this.axios({
            method: 'post',
            url: 'api-p/projectguardrecord/expand/save',
            data: this.formDataEdit,
          })
            .then(
              (res) => {
                if (!res.data.hasError) {
                  this.$message({
                    message: '编辑成功',
                    type: 'success',
                  })
                } else {
                  this.$message({
                    message: res.data.errorMsg,
                    type: 'error',
                  })
                }
                this.saveLoading = false
                this.$refs.formDataEdit.resetFields()
                this.$refs.pagination.getTableListData()
                this.$refs.actionPagination.getTableListData()
              },
              (res) => {
                this.$message({
                  message: res.data.errorMsg,
                  type: 'error',
                })
                this.saveLoading = false

                this.$refs.formDataEdit.resetFields()
              }
            )
            .catch((error) => {})
        } else {
          return false
        }
      })
    },
    saveEdit(item) {
      let params = {
        projectId: this.actionfilterField.projectId,
        createTime: item.item,
        id: item.id,
        record: item.record,
      }
      this.axios
        .post('api-p/projectguardrecord/expand/update', params)
        .then((res) => {
          if (!res.data.hasError) {
            this.$message.success('保存成功')
            if (this.editIndex !== -1) {
              this.editIndex = -1
              this.showVisiable = false
            }
            this.$nextTick(function () {
              this.$refs.actionPagination.getTableListData()
            })
          }
        })
    },
    cancelAction() {
      if (this.editIndex !== -1) {
        this.$set(this.actionTableList, this.editIndex, this.oldDatas)
        this.editIndex = -1
        this.showVisiable = false
      }
    },
    dellAction(item) {
      this.$confirm('确认删除该记录吗?', '提示', {
        cancelButtonClass: 'btn-custom-cancel',
        type: 'warning',
      })
        .then(() => {
          this.axios
            .post('api-p/projectguardrecord/expand/del', { id: item.id })
            .then((res) => {
              if (!res.data.hasError) {
                this.$message.success('删除成功')
                if (this.editIndex !== -1) {
                  this.editIndex = -1
                  this.showVisiable = false
                }
                this.$nextTick(function () {
                  this.$refs.actionPagination.getTableListData()
                })
              }
            })
        })
        .catch(() => {})
    },
    toggleAdvanced() {
      this.advanced = !this.advanced
    },
    getAreaId() {
      var areaId = this.areaId[this.areaId.length - 1]
      this.filterField.areaId = areaId
    },
    searchList() {
      this.$refs.pagination.getTableListData()
    },
    //获取开工日期
    getbeginDateStart(val) {
      if (val) {
        this.filterField.startDate = val
        this.startTimeValueTwo = val
      } else {
        this.filterField.startDate = ''
        this.startTimeValueTwo = ''
      }
    },
    getbeginDateEnd(val) {
      if (val) {
        this.filterField.searchDate = val
        this.endTimeValueTwo = val
      } else {
        this.filterField.searchDate = ''
        this.endTimeValueTwo = ''
      }
    },
    //建档日期
    getarchiveDateStart(val) {
      if (val) {
        this.filterField.effectiveStartDate = val
        this.startTimeValue = val
      } else {
        this.filterField.effectiveStartDate = ''
        this.startTimeValue = ''
      }
    },
    getarchiveDateEnd(val) {
      if (val) {
        this.filterField.effectiveEndDate = val
        this.endTimeValue = val
      } else {
        this.filterField.effectiveEndDate = ''
        this.endTimeValue = ''
      }
    },
    getSelectMenuIds(val) {
      this.headerList = val
      this.$nextTick(() => {
        this.$refs.table.doLayout()
      })
    },
    toExportExcel() {
      if (this.tableList.length == 0) {
        this.$message({
          message: '无数据可导出',
          type: 'warning',
        })
      } else {
        const vm = this
        let arrval = []
        this.headerList.forEach((v) => {
          if (v.isShow) {
            arrval.push(v.prop)
          }
        })
        window.location.href =
          common.commonApi +
          'api-s/cs/projectstats/base/exportGuard?areaId=' +
          vm.filterField.areaId +
          '&industryId=' +
          this.filterField.industryId +
          '&investment=' +
          this.filterField.investment +
          '&projectName=' +
          encodeURIComponent(this.filterField.projectName) +
          '&status=' +
          this.filterField.status +
          '&effectiveStartDate=' +
          this.filterField.effectiveStartDate +
          '&effectiveEndDate=' +
          this.filterField.effectiveEndDate +
          '&startDate=' +
          this.filterField.startDate +
          '&searchDate=' +
          this.filterField.searchDate +
          '&flag=' +
          this.filterField.flag +
          '&serverArea=' +
          this.filterField.serverArea +
          '&sort=' +
          this.filterField.sort +
          '&sortField=' +
          this.filterField.sortField +
          '&field=' +
          arrval +
          '&access_token=' +
          localStorage.getItem('access_token')
      }
    },
    getTableList(data) {
      this.tableList = data
      this.loading = false
      if (this.tableList.length < 1) {
        this.isShow = true
      }
      this.$nextTick(() => {
        this.$refs.table.doLayout()
      })
    },
    getActionTableList(data) {
      this.actionTableList = data
      this.actionloading = false
    },
    editHandle(row) {
      this.formStopVisible = true
      this.$nextTick(() => {
        this.$refs.formDataEdit.resetFields()
      })
      this.formDataEdit.projectId = row.projectId
      this.actionfilterField.projectId = row.projectId
      this.$nextTick(function () {
        this.$refs.actionPagination.getTableListData()
      })
    },
    lookHandle(row) {
      this.formStopVisible = true
      this.actionfilterField.projectId = row.projectId
      this.$nextTick(function () {
        this.$refs.actionPagination.getTableListData()
      })
    },
    // 关闭弹框
    closeDialog() {
      this.oldDatas = {}
      this.editIndex = -1
      this.showVisiable = false
      this.formStopVisible = false
      this.formDataEdit.record = ''
      this.formDataEdit.projectId = ''
    },
    // 项目名称跳转详情
    toDetail(index, row) {
      this.$router.push({
        path: '/home/monitorProjectManagement/projectDetail',
        name: 'projectDetail',
        query: {
          projectId: row.projectId,
          mark: 'issuesList',
        },
      })
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: '/home/project/projectList',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
    // 获取列表头部数据
    getHeaderData(complex) {
      this.axios({
        method: 'post',
        url:
          '/api-s/dimension/head?type=' +
          'PROJECT_GUARD' +
          '&complex=' +
          complex,
      })
        .then((res) => {
          if (complex == '0') {
            this.headerList = res.data.result
          } else {
            var result = res.data.result
            //项目名称、区域、行业禁止筛选
            for (let i = 0, len = result.length; i < len; i++) {
              for (
                let j = 0, childLen = result[i].children.length;
                j < childLen;
                j++
              ) {
                var childrenData = result[i].children[j]
                if (
                  childrenData.prop == 'projectName' ||
                  childrenData.prop == 'areaName' ||
                  childrenData.prop == 'industryName' ||
                  childrenData.prop == 'investmentDesc'
                ) {
                  childrenData.disabled = true
                }
              }
            }
            this.colSetupTableCol = JSON.parse(JSON.stringify(result)) //区别列设置和表格导出表头数据共用
          }
        })
        .catch((error) => {
          this.$message({
            showClose: true,
            duration: 3000,
            message: '获取项目表头失败',
            type: 'error',
          })
        })
    },
    changeFlag() {
      this.filterField.flag = this.code
      console.log(this.code)
      this.$nextTick(function () {
        this.$refs.pagination.getTableListData()
      })
    },
    change() {
      this.$forceUpdate()
    },
  },
}
</script>
<style lang="less" scoped>
.query {
  padding: 0 24px;
  border-bottom: 10px solid #f5f7fa;
  &Title {
    line-height: 16px;
    font-size: 16px;
    color: #333;
    font-weight: bold;
    margin-bottom: 10px;
  }
  /deep/.el-form-item {
    margin-right: 30px;
    .el-input__inner {
      width: 268px;
    }
    .el-form-item__label {
      width: 70px;
    }
  }
  &Last {
    line-height: 36px;
    color: #666;
    font-size: 14px;
    margin-bottom: 24px;
  }
}

.topSection {
  height: 64px;
  line-height: 64px;
  padding: 0 24px;
  .topContentBox {
    .projectState {
      display: inline-block;
      width: 48px;
      height: 20px;
      line-height: 20px;
      font-size: 12px;
      color: #fff;
      text-align: center;
      margin-left: 10px;
      font-weight: normal;
      margin-top: 5px;
    }
    /deep/.el-input__inner {
      font-weight: bold;
      font-size: 24px;
      color: #333333;
      border: none;
      // background: #E4EBF1;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      padding-left: 0;
      vertical-align: middle;
    }
    /deep/.el-select__caret {
      color: #333;
      font-size: 16px;
      vertical-align: middle;
      // line-height: 30px;
    }
  }

  /deep/.tabs {
    margin-top: 21px;
  }
  /deep/.is-active {
    background: #fff;
  }
}

.unRealNameMain {
  padding: 24px;
  .header {
    margin-bottom: 24px;
    float: left;
    .colSetupBtn {
      float: left;
      margin-right: 12px;
    }
    /deep/ button.el-button.commonBut.saveBtn.funComBut.el-button--default {
      float: right;
    }
  }
}
@import '../../../static/css/filterArea.less';
.fontColor {
  color: #409eff;
  cursor: pointer;
}
</style>
